<template>
  <view>
    <u-navbar back-text="收藏" :borderBottom="false" :background="background" :back-text-style="{'color':'#fff'}" backIconColor="#fff"></u-navbar>
    <view v-if="flowList.length === 0" class="empty">您还没有收藏任何商品</view>
    <view v-for="(item, index) in flowList" :key="item.id" class="favorite-item">
      <img :src="item.cover_img" alt="商品图片" />
      <view>{{ item.name }}</view>
      <u-button type="error" @click="removeFavorite(item)">取消收藏</u-button>
    </view>
  </view>
</template>

<script>
import { deleteFavorite, getFavoriteList } from '../../services/favorite';
export default {
  data() {
    return {
      background: {
        'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
      },
      flowList: []
    };
  },
  methods: {
    async fetchFavorites() {
	  const res = await getFavoriteList()
	  this.flowList = res.successMessage
    },
    async removeFavorite(item) {
	  await deleteFavorite(item.id)
	  uni.showToast({
	  	icon:"success",
	  	title: '成功取消收藏'
	  })
	  this.fetchFavorites()
    }
  },
  onLoad() {
    this.fetchFavorites();
  }
};
</script>

<style scoped>
.empty {
  text-align: center;
  padding: 20px;
}
.favorite-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>